<template>
  <!--中间内容-->
  <div class="main">
    <div class="card">
      <div v-for="(year, index) of dataList" :key="index" style="marign-bottom: 20px">
        <div
          style="color: #fff; width: 100%; text-align: center; font-size: 27px; margin-bottom: 10px"
        >
          {{ year.year }}
        </div>
        <div v-for="item of year.list" :key="item.id" class="item" @click="toDetail(item.bcontent)">
          <div style="display: flex">
            <div class="title">{{ titleUtil.title(item.title) }}</div>
            <div class="time">{{ titleUtil.formatDateToMMDD(item.createTime) }}</div>
          </div>
          <div class="model">{{ titleUtil.model(item.model) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import request from '@/util/request'
import { onMounted, ref } from 'vue'
import { ElNotification } from 'element-plus'
import titleUtil from '@/util/titleUtil'
import store from '@/store'
import { useRouter } from 'vue-router'

const dataList = ref({})
const router = useRouter()
const getList = () => {
  request
    .get('/user/pigeonhole/list')
    .then((res) => {
      console.log('获取成功：', res)
      dataList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const toDetail = (item) => {
  console.log('传递前', item)
  store.dispatch('setBlogItem', item)
  router.push('/blogdetail')
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  display: flex;
  height: calc(100vh - 50px);
  background-color: black;
  background-image: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px),
    radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px),
    radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px),
    radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px);
  background-size:
    550px 550px,
    350px 350px,
    250px 250px,
    150px 150px;
  background-position:
    0 0,
    40px 60px,
    130px 270px,
    70px 100px;
}
.item {
  border-bottom: 1px #eee solid;
}
.card {
  margin-top: 20px;
  padding: 10px;
  width: 80%;
  margin-left: 10%;
  height: calc(100vh - 100px);
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.item {
  background: #fff;
  padding: 20px 10px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  &:hover {
    background: #eee;
    cursor: pointer;
  }
}

.title::before {
  content: '';
  width: 2px;
  height: 2px;
  margin-right: 2px;
  border: 1px #009a5c solid;
}
.model {
  margin-right: 20px;
  color: #ff4800;
  border: #ff4800 1px solid;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 4px;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 5px;
    left: -5px;
    width: 8px;
    height: 8px;
    border-left: 1px #ff4800 solid;
    border-bottom: 1px #ff4800 solid;
    background: #fff;
    transform: rotate(45deg);
  }
}
.time {
  color: #009a5c;
  margin-left: 10px;
  font-size: 12px;
  border: 1px #009a5c solid;
  height: 17px;
  padding: 0 5px;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 4px;
    left: -5px;
    width: 8px;
    height: 8px;
    border-left: 1px #009a5c solid;
    border-bottom: 1px #009a5c solid;
    background: #fff;
    transform: rotate(45deg);
  }
}
</style>
